<template>
    <div :style="{
        'position': element && element.draggable && element.options.parentPosition ? 'relative' : 'initial',
        'display': `${element.options.display ? element.options.display : 'initial' }`
    }">
        <div :class="['design-base', 'design-component', {
            active: (selectItem && element) && (selectItem.id === element.id),
            'draggable-component': element && element.draggable
        }]"
            :id="element.id"
            @click.stop="handleSelectItem(element)"
            :style="{
                'top': `${element.draggable ? element.options.y + 'px' : 'initial'}`,
                'left': `${element.draggable ? element.options.x + 'px' : 'initial'}`
            }"
        >
            <component :is="component" :element="element" :Api="Api"></component>
            <div class="design-move" v-if="(selectItem && element) && selectItem.id === element.id" v-show="!element.options.edit">
                <el-button v-show="selectItem.baseFun.move" class="drag-widget" type="primary" icon="el-icon-rank"></el-button>
            </div>
            <div class="design-action" v-if="(selectItem && element) && selectItem.id === element.id" v-show="!element.options.edit">
                <el-button-group>
                    <el-tooltip effect="dark" content="复制" placement="top">
                        <el-button v-show="selectItem.baseFun.copy" type="primary" icon="el-icon-copy-document" @click.stop="copyItem(index)"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top">
                        <el-button v-show="selectItem.baseFun.delete" type="primary" icon="el-icon-delete" @click.stop="deleteItem(index)"></el-button>
                    </el-tooltip>
                </el-button-group>
            </div>
        </div>
    </div>
</template>

<script>
import { getUUID } from "@/utils/index";
import * as _ from 'lodash';
export default {
    name: "DesignBase",
    props: {
        element: {
            type: Object
        },
        index: {
            type: Number
        },
        selectItem: {
            type: Object
        },
        parentElement: {
            type: Object
        },
        Api: {
            type: Object
        }
    },
    components: {
        DesignText: () => import('./components/DesignText/DesignText.vue'),
        DesignDivider: () => import('./components/DesignDivider/DesignDivider.vue'),
        DesignImage: () => import('./components/DesignImage/DesignImage.vue'),
        DesignPicture: () => import('./components/DesignPicture/DesignPicture.vue'),
        DesignCanvasText: () => import('./components/DesignCanvasText/DesignCanvasText.vue'),
        DesignSelect: () => import('./components/DesignSelect/DesignSelect.vue')
    },
    data() {
        return {
            component: null,
            selectItem_sync: this.selectItem,
            once: true // 对于 拖动元素时间 仅执行一次
        }
    },
    methods: {
        handleSelectItem() { // 选中元素
            if (this.selectItem_sync && this.selectItem_sync.id !== this.element.id) this.selectItem_sync = this.element;
        },
        draggable(id) { // 可拖动元素
            this.once = false;
            this.$nextTick(() => {
                let draggableDom = document.getElementById(id);
                if (draggableDom) draggableDom.onmousedown = (mousedownE) => {
                    let disX = mousedownE.clientX - draggableDom.offsetLeft;
                    let disY = mousedownE.clientY - draggableDom.offsetTop;
                    document.onmousemove = (mousemoveE) => {
                        let left = mousemoveE.clientX - disX;
                        let top = mousemoveE.clientY - disY;
                        // draggableDom.style.left = left + 'px';
                        // draggableDom.style.top = top + 'px';
                        this.selectItem_sync.options.x = left;
                        this.selectItem_sync.options.y = top;
                    }
                    draggableDom.onmouseup = () => {
                        document.onmousemove = null;
                    }
                }
            })
        },
        copyItem(index) { // 复制元素
            let deepData = _.cloneDeep(this.parentElement.elementItems[index]);
            let cloneData = {
                ...deepData,
                id: getUUID()
            }
            this.parentElement.elementItems.splice(index, 0, cloneData);
            this.$nextTick(() => {
                this.selectItem_sync = this.parentElement.elementItems[index + 1];
            })
        },
        deleteItem(index) { // 删除元素
            if (this.parentElement.elementItems.length - 1 === index) {
                if (index === 0) {
                    if (this.parentElement.type) this.selectItem_sync = this.parentElement;
                    else this.$emit('handleParentElement');
                } else {
                    this.selectItem_sync = this.parentElement.elementItems[index - 1];
                }
            } else {
                this.selectItem_sync = this.parentElement.elementItems[index + 1];
            }
            this.$nextTick(() => {
                this.parentElement.elementItems.splice(index, 1);
            })
        },
        watchLock(val) {
            if (val) {
                let draggableDom = document.getElementById(this.element.id);
                draggableDom.onmousedown = null;
            } else {
                this.draggable(this.element.id);
            }
        }
    },
    mounted() {
        this.component = this.element.designComponentName;
        this.$nextTick(() => {
            // if (this.selectItem_sync && this.selectItem_sync.draggable && this.once && !this.element.options.lock) this.draggable(this.selectItem_sync.id);
            if (this.element && this.element.draggable && this.once && !this.element.options.lock) this.draggable(this.element.id);
        })
    },
    watch: {
        selectItem(val) {
            this.selectItem_sync = val;
            // if (val.draggable && this.once) this.draggable(val.id);
        },
        selectItem_sync: {
            handler(val) {
                this.$emit('update:selectItem', val);
            },
            deep: true
        },
        'element.options.lock': 'watchLock'
    }
}
</script>

<style>
    @import url('./DesignBase.css');
</style>